<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>开心记账本</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/my.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/my.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
	<style>
    .jumbotron{
        background: #ffda44;
    }

    .go-home{
        position: fixed;
        bottom: 5%;
        right: 1%;
        z-index: 888;
        border-radius: 40px;    
        opacity: 0.9;
    }

  </style>
</head>
<body>

<div id="app">
    <!-- 头部 -->
    <div class="container">
        <div class="row" style="background-color: #ffda44;height: 150px;padding: 43px 0;">
            <div class="col-sm-4" style="text-align: center;padding-top: 10px;">
                <div style="font-size: 2.3em;">
                    2021年
                </div>
            </div>

            <div class="col-sm-4" style="text-align: center;">
                <div style="font-size: 1.3em;">
                    收入
                </div>
                <div style="font-size: 2.2em;">
                    {{totalShouru}}元
                </div>
            </div>

            <div class="col-sm-4" style="text-align: center;">
                <div style="font-size: 1.3em;">
                    支出
                </div>
                <div style="font-size: 2.2em;">
                    {{totalZhichu}}元
                </div>
            </div>
        </div>
    </div>

    <br/>
    <!-- 内容 -->
    <div class="container">

        <!-- 时间+当天总计 -->
        <div v-for="(value, key) in accountDataList" :key="key">
            <br/>
            <div class="row" style="background-color: #ffffff;font-size: 1.5em;color: #a3a3a3;">
                <div class="col-sm-5">
                    <span>{{key}}</span>
                </div>
            </div>
            <div v-for="(value, key2) in value" :key="key2" class="row" style="background-color: ffffff;font-size: 1.5em;margin-top: 15px;">
                <div class="col-sm-5">
                    <span v-if="value.account_type == 2">
                        <img  src="../image/zhichu2.png" style="width:60px;height: 60px;"/>
                    </span>
                    <span v-else="value.account_type == 1">
                        <img src="../image/shouru.png" style="width:60px;height: 60px;"/>
                    </span>
                    <span style="font-size: 1.3em;padding-left: 20px;">{{value.account_desc}}</span>
                </div>
                <div class="col-sm-7" style="text-align: right;">
                    <span v-if="value.account_type == 2">
                        <span style="font-size: 2em;">-{{value.account_num}}</span>
                    </span>
                    <span v-else="value.account_type == 1">
                        <span style="font-size: 2em;">{{value.account_num}}</span>
                    </span>
                </div>
                <br/>
            </div>
        </div>
        <hr>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加记账
                    </h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                        <label for="name">账目类型</label>
                        <select class="form-control" id="accountType">
                            <option value="2">支出</option>
                            <option value="1">收入</option>
                        </select>
                        </div>

                        <div class="form-group">
                        <label for="name">金额</label>
                        <input type="text" id="accountNum" maxlength="11" placeholder="请输入金额" class="form-control quantity-count"/>
                        </div>

                        <div class="form-group">
                        <label for="name">描述</label>
                        <input type="text" id="accountDesc" maxlength="15" placeholder="请输入描述" class="form-control quantity-count"/>
                        </div>
                        <button type="button" class="btn btn-primary" @click="submitData()">提交</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>

<view class="go-home">
    <img src="../image/add.png" style="width: 120px;height: 120px;" data-toggle="modal" data-target="#myModal"/>
</view>



<script>
    //后台服务请求地址
    var urlStr = "http://127.0.0.1:1111";

    //vue
    var vm1 = new Vue({
        el: '#app',   // 选择器
        data: {
            accountDataList: [],
            totalShouru: '500',
            totalZhichu: '500',
            formData: {
                account_type : '',
                account_num : '',
                account_desc : ''
            }
        },
        methods: {

            //提交数据到后台
            submitData(){
                this.formData.account_type = $("#accountType").val();
                this.formData.account_num = $("#accountNum").val();
                this.formData.account_desc = $("#accountDesc").val();
                axios.post(urlStr + "/save", this.formData).then(response => {
                    $('#myModal').modal('hide');//隐藏弹出框
                    success_prompt(response.data.message, 2000);
                    this.getAccountList();
                }).catch(function (error) { // 请求失败处理
                    console.log(error);
                    fail_prompt("请求发生异常", 5000);
                });
            },
            
            //初始化方法
            getAccountList(){
                axios.post(urlStr + "/list", this.formData).then(response => {
                    var data = response.data;
                    this.totalShouru = data.totalShouru;
                    this.totalZhichu = data.totalZhichu;
                    this.accountDataList = data.userAccountList;
                }).catch(function (error) { // 请求失败处理
                    console.log(error);
                });
            },

            //选择月份时触发该函数
            selectMonth(){
                this.getAccountList();
            }
        },
        //钩子函数
        mounted() {
            this.getAccountList();
            console.log('钩子函数执行了')
        }
    })

</script>

</body>
</html>